<template>
  <q-list dense class="menu-container">
    <q-expansion-item
        v-for="menu in menuList"
        :key="menu.id"
        clickable
        expand-separator
        :icon="menu.imgUrl"
        :label="menu.label"
        :expand-icon-class="(menu.children && menu.children.length > 0) ? '' : 'hidden'"
      >
        <q-separator/>
        <div  class="menu-group">
          <template v-for="item in menu.children" :key="item.id">
             <div class="menu-item" draggable="true" @dragstart="onDragStart($event, item)">
                <div class="menu-item-icon">
                  <q-avatar size="30px">
                    <img :src="item.imgUrl">
                  </q-avatar>
                </div>
                <div class="menu-item-text">{{item.label}}</div>
              </div>
          </template>
        </div>
      </q-expansion-item>
  </q-list>
</template>

<script lang="ts">
import { defineComponent, toRefs } from 'vue';

export default defineComponent({
  name: 'AmyDrawerItem',
  props: {
    menuList: {
      type: Array,
      required: true
    }
  },
  setup (props, context) {
    //数据解构
    const {
      menuList
    } = toRefs(props);

    // 拖拽
    const onDragStart = (event: DragEvent, item: any) => {
      if (event.dataTransfer) {
        event.dataTransfer.setData('component-create', item.id.toString(10));
        //console.log('component-create');
      }
    }

    return {
      menuList,
      onDragStart
    };
  }
});

</script>

<style lang="scss" scoped >
.menu-container {
  left: 0px;
  top: 0px;
  margin: 0px;
  padding: 0px;
  background-color: white;
  overflow-y: auto;
  overflow-x: hidden;

  .menu-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
    background-color: #d9e9ec;

    .menu-item {
      width: 60px;
      padding: 3px;
      color: #444343;
      font-size: 10px;
      border: transparent solid 1px;
      &.base {
        width: 64px;
      }

      .menu-item-icon {
        text-align: center;
      }

      .menu-item-text {
        margin-top: 5px;
        text-align: center;
      }
    }

    .menu-item:hover {
      border: #ccc solid 1px;
      background: #00aefe;   //#ccc;
      color: #fdf8f8;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
</style>
